/**
 * NavigationBar
 * @flow
 */
import React, { Component, PropTypes } from 'react';

import {
    StyleSheet,
    Platform,
    TouchableOpacity,
    Image,
    StatusBar,
    Text,
    View,
    ViewPropTypes,
    Dimensions
} from 'react-native';

// iPhoneX
const X_WIDTH = 375;
const X_HEIGHT = 812;
// screen
const SCREEN_WIDTH = Dimensions.get('window').width;
const SCREEN_HEIGHT = Dimensions.get('window').height;
function isIphoneX() {
    return (
        Platform.OS === 'ios' &&
        ((SCREEN_HEIGHT === X_HEIGHT && SCREEN_WIDTH === X_WIDTH) ||
            (SCREEN_HEIGHT === X_WIDTH && SCREEN_WIDTH === X_HEIGHT))
    )
}
// console.log(isIphoneX(),'isIphoneX()')
const NAV_BAR_HEIGHT_IOS = 44;
const NAV_BAR_HEIGHT_ANDROID = 50;
const STATUS_BAR_HEIGHT = isIphoneX() ? 44 : 20;
const StatusBarShape = {
    barStyle: PropTypes.oneOf(['light-content', 'default', 'dark-content']),
    hidden: PropTypes.bool,
    backgroundColor: PropTypes.string,
};
import CommonStyleSheet from './CommonStyleSheet'

export default class NavigationBar extends Component {
    static propTypes = {
        style: ViewPropTypes.style,
        title: PropTypes.string,
        titleView: PropTypes.element,
        titleLayoutStyle: ViewPropTypes.style,
        hide: PropTypes.bool,
        statusBar: PropTypes.shape(StatusBarShape),
        rightButton: PropTypes.element,
        leftButton: PropTypes.element,

    }
    static defaultProps = {
        statusBar: {
            // barStyle: Platform.OS == 'ios' && 'dark-content',
            hidden: false,
            // backgroundColor: '#fff'
        },
    }
    constructor(props) {
        super(props);
        this.state = {
            title: '',
            hide: false
        };
    }

    getButtonElement(data) {
        return (
            <View style={styles.navBarButton}>
                {data ? data : null}
            </View>
        );
    }

    render() {
        let statusBar = !this.props.statusBar.hidden ?
            <View style={styles.statusBar}>
                <StatusBar {...this.props.statusBar} />
            </View> : null;

        let titleView = this.props.titleView ? this.props.titleView :
            <Text ellipsizeMode="head" numberOfLines={1} style={styles.title}>{this.props.title}</Text>;

        let content = this.props.hide ? null :
            <View style={styles.navBar}>
                <View style={[styles.buttonWrapper, styles.buttonWrapperLeft]}>
                    {this.getButtonElement(this.props.leftButton)}
                    {this.props.leftButtonText ? <Text style={styles.buttonText}>{this.props.leftButtonText}</Text> : null}
                </View>
                <View style={[styles.navBarTitleContainer, this.props.titleLayoutStyle]}>
                    <Text style={styles.navBarText}>{titleView}</Text>
                </View>
                <View style={styles.buttonWrapper}>
                    {this.getButtonElement(this.props.rightButton)}
                    {this.props.rightButtonText ? <Text style={styles.buttonText}>{this.props.rightButtonText}</Text> : null}
                </View>
            </View>;
        return (
            <View style={[styles.container, this.props.style]}>
                {statusBar}
                {content}
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#fff',
    },
    navBar: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        height: Platform.OS === 'ios' ? NAV_BAR_HEIGHT_IOS : NAV_BAR_HEIGHT_ANDROID,
        // paddingRight: 15,
        // paddingLeft: 15
        borderBottomWidth: 0.5,
        borderColor: '#d7d7d7'
    },
    navBarTitleContainer: {
        alignItems: 'center',
        justifyContent: 'center',
        position: 'absolute',
        left: 40,
        top: 0,
        right: 40,
        bottom: 0,
    },
    navBarText: {
        fontWeight: '500'
    },
    title: {
        fontSize: 17,
        color: '#333',
        fontWeight:'bold',
    },
    buttonText: {
        color: '#333'
    },
    navBarButton: {
        alignItems: 'center',
    },
    statusBar: {
        height: Platform.OS === 'ios' ? STATUS_BAR_HEIGHT : 0,
    },
    buttonWrapper: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center'
    },
    buttonWrapperLeft: {
        width: 44,
        // backgroundColor: 'red',
        height: CommonStyleSheet.navContentHeight
    }
})
